<!DOCTYPE html>
<html>
<head>
    <title>CC</title>
    <meta http-equiv=Content-Type content="text/html" charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="classification" content="">
    <link charset="utf-8" rel="stylesheet" href="public/css/index.css">
    <link charset="utf-8" rel="stylesheet" href="public/css/cc.css">
    <script charset="utf-8"  src="public/js/zepto.min.js"></script>
    <script charset="utf-8"  src="public/js/common.js"></script>
    <script charset="utf-8"  src="public/js/payment.js"></script>
</head>
<body>

   <div id = 'ccPayment' class='page'> 
        <div class='head'>
             <span class='back'></span> <span>Payment</span>
        </div>
      
        <div class='topTip'></div>
     
        <div class='body'>
             <div class='part1'>  
                  <p><span>Billing Information</span></p>
                  <ul>
                    <li>
                         <span class='span_input'>
                             <select name='country'>
                                <option val=''> Country </option>
                             </select>
                         </span>
      
                         <span class='span_input'>
                             <select name='state_id'>
                                <option val=''> State </option>
                             </select>
                         </span>  

                    </li>

                    <li>
                         <span class='li_span_input'>
                             <input spellcheck="false" type='text' name='city' placeholder='City/Town'>
                         </span>
                    </li>

                    <li>
                         <span class='li_span_input'>
                             <input spellcheck="false" type='text' name='street' placeholder='Billing Address'>
                         </span>
                    </li>


                    <li>
                         <span class='span_input'>
                             <input spellcheck="false" type='text' name='zip' placeholder='Zip Code'>
                         </span>
      
                         <span class='span_input'>
                             <input maxlength=20 spellcheck="false" type='tel' name='phone' placeholder='Phone Number'>
                         </span>  

                    </li>
                  </ul>
             </div>

             <div class='part2'>  
                  <p><span>Payment Information</span></p>
                  <ul>
                    
                    <li>
                         <span class='li_span_input'>
                             <input maxlength=30 spellcheck="false" type='text' name='credit_card_name' placeholder='Your Name on Card'>
                         </span>
                    </li>

                    <li>
                         <span class='li_span_input'>
                             <input maxlength=22 value='' spellcheck="false" type='tel' name='card_number' placeholder='Your Card Number'>
                         </span>
                    </li>

                    <li class='card'>
                        <span class='visa hide_card'></span><span class='amex hide_card'></span><span class='mastercard hide_card'></span>
                    </li>

                    <li>
                         <span class='span_input'>
                             <input maxlength=5 spellcheck="false" type='tel' name='expiration_date' placeholder='Expiration Date'>
                         </span>
      
                         <span class='span_input'>
                             <input spellcheck="false" type='tel' name='cc_verification' placeholder='Security Code'>
                         </span>  

                    </li>
                   
                    <li class='li_total'>
                         <span class='total'> Total: </span>
                         <span class='total total_text'> $99.95 </span>
                    </li>

                    <li>
                         <span><button class='submit'> Subscribe Now </button></span>
                    </li>
                    <li>
                         <div class='secure'> <span class='icon'></span><span>Secure transaction</span> </div>
                    </li>

                  </ul>
              </div>

        </div>

        <div class='des'>
              By subscribing,you anthorize us to charge your card now.
              <br>
              <br>
              Your subsciption will be auto-renewed at the monthly rate until you canel it, unless you pay by packages.
        </div>
     </div>

     <div id='ccFail' class='page'>
        
        <div class='head'>
             <span class='back'></span> <span>Payment Details</span>
        </div>
      
        <div class='topTip'></div>
    
        <div class='fail_des'>
             <div class='left'></div>
             <div class='right'>
                  <p> Payment Failed </p>
                  <div> The transaction was declined without explanation by the card issuer. </div>
             </div>  
        </div>

        <div class='body'>
             <p class='body_des'> Please verify your card and billing information below are correct and try again.</p>
             <div class='card_info'><span class='card_key'> Billing Address </span> <span class='card_val'> Please verify your card and billing information below are correct and try again.</span></div>             
             <div class='card_info'><span class='card_key'> Card Number </span> <span class='card_val'> 4242 4242 4242 4242</span></div>             
             <div class='card_info'><span class='card_key'> Expirtion date </span> <span class='card_val'> 15/06 </span></div>             
             <div class='card_info'><span class='card_key'> Verfication ID </span> <span class='card_val'> 1234 </span></div>             
        </div>

        <div class='fail_button'>
             <div class='paypal'>
                  <span>Continue to </span><span class='paypal_icon'></span>
             </div>
             <div class='tel'> <span>Support: 1-416-628-1072 </span> </div>
        </div>

     </div>

     <div id='ccSuccess' class='page'>

        <div class='head'>
             <span class='done'>Done</span> <span>Payment Details</span>
        </div>
      
        <div class='topTip'></div>
    
        <div class='success_des'>
             <div class='left'></div>
             <div class='right'>
                  <p> Payment successful </p>
             </div>  
        </div>

        <div class='body'>

             <div class='payNum'>
                   <p>Masonsoft.com</p>
                   <div>$210.00</div>
             </div>

             <div class='payInfo'>
                   <ul>
                     <li><span class='card_key'> Username:</span><span class='card_val'>test</span></li>                  
                     <li><span class='card_key'> Card Type:</span><span class='card_val'>visa</span></li>                  
                     <li><span class='card_key'> Card Number:</span><span class='card_val'>4242 4242 4242 4242</span></li>                  
                     <li><span class='card_key'> Transaction Date:</span><span class='card_val'>05-May-15</span></li>                  
                     <li><span class='card_key'> Currently Paid Thought:</span><span class='card_val'>05-May-15</span></li>                  
                   </ul>
             </div>


        </div>

        <div class='bottom'>
             <span class='note'>Note: </span><span class='green'>SuccessfulMatch</span> will be shown as the billing name on your credit card statement. 
        </div>
 
 
     </div>

   </body>
</html>


